<template>
  <div>
    <OutlineNavBar></OutlineNavBar>
    <div id="max">
       <div id="max-top">
         <img src="../assets/37.png" style="height: 120px;width: 100%" />
       </div>
      <div id="max-bo">
        <div class="s1">
          <div class="s2">
            <img :src="formData.headImgUrl" style="width: 90px;height: 90px;"/>
          </div>
          <div class="s2-1">
            <span>{{formData.lecturerUserName}}</span>
          </div>
          <div class="s3">
            <span>{{formData.introduce}}</span>
          </div>
        </div>
      </div>
      <div style="width: 100%;background: #F5F5F5; ">
        <div class="pager-box" style="padding:10px 0;margin: 0 auto;width: 1500px" ref="all">
          <!--所有课程-->
          <el-row :gutter="10" style="width: 80%;margin-left: 10%">
            <el-col :span="6" v-for="(item1,index) in course" :key="index" style="margin-bottom: 1%;margin-top: 1%">
              <div  class="divs">
                <a href="#" class="a1">
                  <!--<el-card :body-style="{ padding: '0px'}">-->
                  <!--<img v-bind:src="item.imgurl" width="100%" height="140px"/>-->
                  <!--<div>-->
                  <!--<div class="content" style="width: 100%">-->
                  <!--<div>{{item.name}}</div>-->
                  <!--<span class="price" style="color: red;font-size: 18px">￥{{item.price}}</span>-->
                  <!--<span class="sprice" style="color: red;font-size:14px ">SVIP:￥{{item.sprice}}</span>-->
                  <!--</div>-->
                  <!--</div>-->
                  <!--</el-card>-->
                  <router-link :to="{path:'/outline',query:{type:'0',all:JSON.stringify(item1)}}">
                    <el-card :body-style="{ padding: '0px',height:'200px'}">
                      <img v-bind:src="item1.cover" width="100%" height="140px"/>
                      <div>
                        <div class="content" style="width: 100%">
                          <div>{{item1.title}}</div>
                          <span v-if="item1.isFree==1" style="color: red;font-size: 18px">免费</span>
                          <span v-if="item1.isFree==0" style="color: red;font-size: 18px">
                      <span class="price" style="color: red;font-size: 18px">￥{{item1.courseOriginal}}</span>
                      <span class="sprice" style="color: red;font-size:14px ">SVIP:￥{{item1.courseSvip}}</span>
                    </span>
                        </div>
                      </div>
                    </el-card>
                  </router-link>
                </a>
              </div>
            </el-col>
          </el-row>
          <!--所有课程end-->
          <!--分页-->
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>
<script>
  import qs from 'qs'
  import Navbar from "./Navbar";
  import OutlineNavBar from "./outline/OutlineNavBar";
  import Bottom from "./Bottom";
  export default {
    components: {Bottom, OutlineNavBar, Navbar},
    data(){
      return {
        // imgUrl:"http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg",
        // circleUrl:"http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg",
       // imgUrl:require(""),
        //circleUrl:require("../../assets/13.jpg"),
        formData:[],
        course:'',
        count:'',
        tid:this.$route.query.tid,
      }

    },
    methods:{
      //查询
      query(){
        this.$axios.get("http://localhost:8899/teacher-front/demo/teacher/queryByTid?tid="+this.tid).then(r=>{
          //alert(JSON.stringify(r.data.obj))
        })
      },
      findTeacher(){
        this.$axios2.post("student/stu/lecturer/findById",qs.stringify({lecturerId:this.tid})).then(r=>{
          //alert(JSON.stringify(r.data));
          this.formData=r.data;
        })
      },
      //课程的基本信息
      coursexinxi(){
        let data = new Object();
        data.lecturerId =this.tid;
        this.$axios2.post("showdata/eduCourse/findAllByTeacher",qs.stringify(data)).then(r=>{
          //alert(JSON.stringify(r.data));
          this.course=r.data;
        })
      },
      dianji(row){
        alert(JSON.stringify(row))
      }
    },
    created(){
      // let tid = this.$route.query.tid;
      // this.tid=tid;
      // let aa = sessionStorage.getItem("uid");
      // this.kecount();
      // this.query();
      this.coursexinxi();
      this.findTeacher();
    }
  }
</script>

<style scoped>
  *{
    text-decoration: none;
  }
  .content div{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .a1:link,.a1:active,.a1:visited,.a1:hover{
    text-decoration:none;
  }
  .pager-box>>>.el-pager li {
    background-color: white;
    color: black;
    border: 1px solid #CCCCCC;
    width: 60px;
    line-height: 35px;
    height: 35px;
    border-radius: 4px;
  }
  .pager-box>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #EC7E00;
    color: white;
    border: 1px solid #CCCCCC;
  }
  .treeul{
    border-bottom: #D7D7D7 solid 1px;
    padding-bottom: 1%;
    width: 80%;
    margin-left: 10%;
  }
  .treeul li{
    list-style:none;
    float: left;
    list-style-type: none;
    margin-right:4px;
  }
  .sonul li{
    list-style:none;
    color: black;
    float: left;
  }
  .treeul>>>.el-radio-button__inner {
    border: none;
    border-radius: 4px;
    font-size: 15px;
  }
  .divs:hover{
    position: relative;
    top: -2px;
    left: 2px;
    box-shadow:  5px 5px 5px darkgrey ;
  }
  body{ text-align:center}
  #max{
    background-color: #F5F5F5;
  }
  #max-bo{
     background-color:#FFFFFF;
     height: 140px;
     width: 100%;
    box-shadow: 2px 2px 5px #909090;
   }
  #max-top{
    height: 120px;
  }
  .s1{
    height: 140px;
    width: 1200px;
    margin: auto;
  }
  .s2{
    width: 90px;
    height: 140px;
    float: left;
  }
  .s2 img{
    position:absolute;
    box-shadow:2px 2px 10px gray;
    border-radius: 50%;
    top: 215px;
  }
  .s2-1{
    margin:0 0 10px 100px;
    width: 100px;
  }
  .s2-1 span{
    font-size: 22px;
    text-align: center;
    margin-left: 20px;
  }
  .s3{
    width: 1100px;
    height: 80px;
    float: right;
    color: gray;
    /*margin-top: 50px;*/
  }
  #max-butoon{
    width: 1200px;
    margin: auto;
  }
  /*卡片*/
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width:280px;
    height: 139px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .ss1{
    font-size: 12px;
  }
  .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
    -webkit-box-shadow:5px 5px 20px 5px rgba(0,0,0,.1);
    box-shadow: 5px 5px 20px 5px rgba(0,0,0,.1);
  }
  .ss2{
    color: red;
  }
  .ss3{
    color: red;
    font-size: 13px;
  }
  .text1 span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
